<template>
    <div style="padding:15px">
        <vxe-toolbar
            id="toolbarId_fa4"
            :custom="{storage: true}"
            export
            :refresh="{query: findList}"
        >
            <template v-slot:buttons>
                <el-button @click="funcFilter">查询</el-button>
                <el-button @click="funcAdd">新增</el-button>
            </template>
        </vxe-toolbar>
        <vxe-table
            ref="xTable"
            border
            show-footer
            resizable
            stripe
            highlight-current-row
            highlight-hover-row
            row-id="id"
            class="mytable-footer"
            height="700"
            :data="tableData"
            :loading="loading"
            :sort-config="{ remote: true }"
      export-config
      show-overflow
      align="center"
            @sort-change="sortList"

        >
            <vxe-table-column type="checkbox" width="60"  fixed="left" />
            <vxe-table-column>
                <vxe-table-column field="field" title="字段" min-width="100" sortable />
                <template v-slot:header="{ column }">
                    <el-input v-model="listQuery.field" placeholder="请输入字段" clearable />
                </template>
            </vxe-table-column>
            <vxe-table-column>
                <vxe-table-column field="fieldName" title="字段展示名称" min-width="100" sortable />
                <template v-slot:header="{ column }">
                    <el-input v-model="listQuery.fieldName" placeholder="请输入字段展示名称" clearable />
                </template>
            </vxe-table-column>
            <vxe-table-column>
                <vxe-table-column
                    field="type"
                    title="字段类型"
                    :formatter="formatterType"
                    min-width="100"
                    sortable
                />
                <template v-slot:header="{ column }">
                    <el-select v-model="listQuery.type" placeholder="请选择" clearable>
                        <el-option
                            v-for="item in typeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </template>
            </vxe-table-column>
            <vxe-table-column>
                <vxe-table-column
                    field="source"
                    title="数据来源"
                    :formatter="formatterSource"
                    min-width="100"
                    sortable
                />
                <template v-slot:header="{ column }">
                    <el-select v-model="listQuery.source" placeholder="请选择" clearable>
                        <el-option
                            v-for="item in sourceOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </template>
            </vxe-table-column>
            <vxe-table-column>
                <vxe-table-column field="sort" title="排序" min-width="100" sortable />
                <template v-slot:header="{ column }">
                    <el-input v-model="listQuery.sort" placeholder="请输入排序" clearable />
                </template>
            </vxe-table-column>
            <vxe-table-column>
                <vxe-table-column field="remark" title="备注" min-width="100" sortable />
                <template v-slot:header="{ column }">
                    <el-input v-model="listQuery.remark" placeholder="请输入备注" clearable />
                </template>
            </vxe-table-column>
            <vxe-table-column field="action" title="操作" fixed="right" min-width="150">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" content="详情" placement="top">
                        <vxe-button type="text" @click="funcDetail(scope.row.code)">
                            <i class="el-icon-document" />
                        </vxe-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                        <vxe-button type="text" @click="funcEdit(scope.row.code)">
                            <i class="el-icon-edit" />
                        </vxe-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="删除" placement="top">
                        <vxe-button type="text" @click="funcDelete(scope.row.code)">
                            <i class="el-icon-delete" />
                        </vxe-button>
                    </el-tooltip>
                </template>
            </vxe-table-column>
        </vxe-table>
        <vxe-pager
            :loading="loading"
            :current-page.sync="listQuery.pageNum"
            :page-size.sync="listQuery.pageSize"
            :page-sizes="Pagingconf"
            :total="listQuery.total"
            :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
            @page-change="handlePageChange"
        />

        <vxe-modal v-model="modelAddFlag" title="新增" width="800" height="800" resize>
            <compAdd ref="addRef" @fatherAddMethod="fatherAdd" @fatherCancelMethod="fatherCancel" />
        </vxe-modal>
        <vxe-modal v-model="modelEditFlag" title="编辑" width="800" height="800" resize>
            <compEdit
                ref="editRef"
                @fatherEditMethod="fatherEdit"
                @fatherCancelMethod="fatherCancel"
            />
        </vxe-modal>
        <vxe-modal v-model="modelDetailFlag" title="详情" width="800" height="800" resize>
            <compDetail ref="detailRef" />
        </vxe-modal>
    </div>
</template>
<script>
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
import XEUtils from 'xe-utils'
import VXEUtils from 'vxe-utils'
Vue.use(VXETable, VXEUtils, XEUtils, { mounts: ['cookie'] })
import compAdd from './components/diyReportFieldAdd.vue'
import compEdit from './components/diyReportFieldEdit.vue'
import compDetail from './components/diyReportFieldDetail.vue'
import request from '@/utils/request'
import { diyReportField } from '@/api/financialStatistics'
export default {
    name: 'diyReportFieldList',
    components: {
        compAdd,
        compEdit,
        compDetail,
    },
    data() {
        return {
            message: '',
            loading: false,
            tableData: [],
            modelAddFlag: false,
            modelEditFlag: false,
            modelDetailFlag: false,
            copy: false,
            listQuery: {
                code: '',
                branchCode: '',
                reportCode: '',
                field: '',
                fieldName: '',
                type: '',
                source: '',
                sort: '',
                calJson: '',
                remark: '',
                pageNum: 1,
                pageSize: 20,
                sortField: '',
                sortType: '',
                total: 0,
            },
            Pagingconf: [],
            // 字段类型
            typeOptions: [
                { label: '文本', value: 'str' },
                { label: '数字', value: 'int' },
                { label: '字典值', value: 'select' },
                { label: '日期', value: 'date' },
                { label: '金额', value: 'dicimal' },
            ],
            // 数据来源
            sourceOptions: [
                { label: '自定义', value: 'diy' },
                { label: '计算得出', value: 'cal' },
            ],
        }
    },
    created() {
        this.listQuery.reportCode = this.$route.query.code
        this.findList()
    },
    methods: {
        findList() {
            this.loading = true
            return new Promise((resolve) => {
                diyReportField(this.listQuery).then((response) => {
                    this.tableData = response.data.records
                    this.listQuery.total = response.data.total
                    this.Pagingconf = [20, 30, 50, 100]
                    this.loading = false
                    resolve()
                })
            })
        },
         // 查询
        funcFilter() {
            this.listQuery.pageNum = 1
            this.findList()
        },
        // 翻译字段类型
        formatterType({ cellValue }) {
            const item = this.typeOptions.find(
                (item) => item.value === cellValue
            )
            return item ? item.label : ''
        },
        // 翻译数据来源
        formatterSource({ cellValue }) {
            const item = this.sourceOptions.find(
                (item) => item.value === cellValue
            )
            return item ? item.label : ''
        },
        // 排序
        sortList({ column, property, order }) {
            if (order) {
                this.listQuery.sortField = property
                this.listQuery.sortType = order
            } else {
                this.listQuery.sortField = ''
            }
            this.findList()
        },
        // 添加方法
        funcAdd() {
          this.modelAddFlag = true
          this.$refs.addRef.getInfo()
        },
        // 修改方法
        funcEdit(code) {
            this.$refs.editRef.getInfo(code)
            this.modelEditFlag = true
        },
        // 详情方法
        funcDetail(code) {
            this.$refs.detailRef.getInfo(code)
            this.modelDetailFlag = true
        },
        // 删除方法
        funcDelete(row) {
            this.$confirm('确认删除吗？')
                .then((_) => {
                    request({
                        url: `/wms/diyReportField`,
                        method: 'delete',
                        params: { codes: row },
                    }).then((response) => {
                        this.$message({
                            message: response.msg,
                            type: 'success',
                        })
                        this.findList()
                    })
                })
                .catch((_) => {})
        },
        // 增加组件的父方法
        fatherAdd() {
            this.modelAddFlag = false
            this.findList()
        },
        // 编辑组件的父方法
        fatherEdit() {
            this.modelEditFlag = false
            this.findList()
        },
        // 公共取消
        fatherCancel(modelFlag) {
            switch (modelFlag) {
                case 'add':
                    this.modelAddFlag = false
                    break
                case 'edit':
                    this.modelEditFlag = false
                    break
                case 'detail':
                    this.modelDetailFlag = false
                    break
                default:
            }
        },
        // 分页handle
        handlePageChange({ currentPage, pageSize }) {
            this.listQuery.pageNum = currentPage
            this.listQuery.pageSize = pageSize
            this.findList()
        },
    },
}
</script>

<style>
</style>
